不定更新、可能爛尾XD

學習資源: W3Schools、其他網路資料

SVG有提供Filter(濾鏡)這個東西，可以用來在SVG圖形上加入特殊的效果，像是圖形模糊化、產生圖形陰影、將雜訊加入圖形等。以下介紹的是圖形模糊化、產生圖形陰影這2個濾鏡效果。

• 瀏覽器對於SVG Filter的支援
  
  (取自SVG Filters - W3Schools)

SVG : 濾鏡

(僅列出部分有使用到的屬性)

• <svg></svg>

  • height : 整個圖形(畫布)的原始長度
  • width: 整個圖形(畫布)的原始寬度

• <defs></defs>

  • defs是definitions(定義)的簡寫，用來存放SVG特殊元素的定義，像是filter

• <filter></filter>

  • 濾鏡的本體，設定濾鏡套用後的實際效果
  • id: filter的名稱
  • x: filter的x坐標
  • y: filter的y坐標

  (也有width、height)

• <rect></rect> 或 <rect />

  • ...
  • filter: 要套用的濾鏡

範例1 - 套用模糊濾鏡

(左邊有套用濾鏡，右邊是原始圖形)

• <feGaussianBlur></feGaussianBlur> 或 <feGaussianBlur />
  • in: 套用濾鏡效果的圖形來源
  • stdDeviation: 濾鏡的模糊程度

<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0">
             <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>

1. feGaussianBlur的SourceGraphic表示將整個圖形來源(rect)都套用濾鏡
2. filter="url(#濾鏡名稱)"

範例2 - 產生陰影效果

(左邊有套用濾鏡，右邊是原始圖形)

• <feOffset></feOffset> 或 <feOffset />

  • in: 套用濾鏡效果的圖形來源
  • dx: 圖形在x坐標上的位移
  • dy: 圖形在y坐標上的位移
  • result: 套用濾鏡後的結果名稱

• <feBlend></feBlend> 或 <feBlend />

  • in: 套用濾鏡效果的圖形來源1
  • in2: 套用濾鏡效果的圖形來源2
  • mode: 圖形混和的模式

feOffset的功能是將原始圖形進行位移，feBlend的功能則是將位移後的圖形和原始圖形混和在一起。
如果filetr的width、height沒有設定的比rect大一些，會造成部分濾鏡陰影效果消失。

<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0" width="150px" height="150px">
            <feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
            <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>

範例3 - 產生陰影效果+陰影模糊化

(左邊有套用濾鏡，右邊是原始圖形)

可以把位移後的圖形結果(offOut)再套用模糊濾鏡，最後將模糊後的結果(blurout)與原始圖形(SourceGraphic)混和在一起。

<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0" width="150px" height="150px">
            <feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
            <feGaussianBlur in="offOut" result="blurout" stdDeviation="5" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>

還有更複雜的濾鏡效果等待我們去發現(๑´ㅂ`๑) 。

參考資料

SVG Filters - W3Schools
一次搞懂SVG中所有常用的濾鏡